<template>
  <div class="main">
    <Row class="y_query_right">
      <Button type="primary" icon="md-add" class="y_condition" @click="showAddModal(1, null)">新增一级采集分类</Button>
<!--      <Divider size="small"></Divider>
      <Input type="text" v-model="searchParam.name" placeholder="分类名称" class="y_condition"></Input>
      <Button type="primary" @click="search()">查询</Button>-->
    </Row>

    <!-- 分类表格 -->
    <Table row-key="id" :columns="columns" :data="categoryTreeData" no-data-text="暂无数据" size="small" border style="margin-top: 20px;"></Table>

    <!-- 新增/修改弹窗 -->
    <Modal v-model="categoryModalStatus.isShow" :title="categoryModalStatus.title" :mask-closable="false">
      <Form ref="categoryForm" :model="paramCategory" :label-width="90" :show-message="false">
        <FormItem label="分类名称" prop="name" required class="one-line">
          <Input type="text" v-model="paramCategory.name" placeholder="分类名称"></Input>
        </FormItem>
        <FormItem label="标签" prop="tags" class="one-line">
          <Select v-model="paramCategory.tags" placeholder="标签" multiple filterable allow-create @on-create="createTag">
            <Option v-for="(item, index) in categoryModalStatus.tags" :key="index" :value="item">{{item}}</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="hideCategoryModal()">取消</Button>
        <Button type="primary" @click="saveCategory()">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import categoryData from "./js/category/categoryData";
import {addOrUpdateCategory, deleteCategory, queryCategories} from "./js/category/categoryFuns";
export default {
  name: "CategoryList",
  data() {
    return {
      searchParam: categoryData.tParam.searchParam,
      paramCategory: categoryData.tParam.paramCategory,
      categoryTreeData: categoryData.tData.categoryTreeData,
      categoryModalStatus: categoryData.tStatus.paramCategoryModal,
      dict: categoryData.dict,
    }
  },
  computed: {
    columns() {
      let self = this;
      return [
        {title: "采集分类名称", key: "name", align: "left", display: "inline-block", minWidth: 400, tree: true,
          render(h, params) {
            let text = params.row.name;
            if(params.row.level < 3) {
              text += " ("+params.row.children.length+")";
            }
            return h("span", text);
          }
        },
        {title: "层级", key: "level", align: "center", width: 150},
        {title: "标签", key: "tags", align: "center", width: 350, render(h, params){
            return params.row.tags==null||params.row.tags.length==0?"":h("Tag", {
              props: {color: "purple"}
            }, params.row.tags.join(", "))
          }
        },
        {title: "操作", align: "center", width: 400, render(h, params){
          var addTitle = "新增"+(params.row.level+1)+"级分类";
            return h("div", [
              params.row.level>2? h("div") : h("Button", {
                props: {type: 'primary', size: 'small', icon: "md-add", disabled: params.row.level>2},
                style: {marginRight: '16px',marginTop:'6px',marginBottom:'6px'},
                on: {
                  click: () => {
                    self.showAddModal(params.row.level+1, params.row);
                  }
                }
              },addTitle),
              h("Button", {
                props: {type: 'primary', size: 'small', icon: "md-create"},
                style: {marginRight: '10px',marginTop:'6px',marginBottom:'6px'},
                on: {
                  click: () => {
                    self.showModifyModal(params.row);
                  }
                }
              }, "修改"),
              h("Button", {
                props: {type: 'error', size: 'small', icon: "md-trash"},
                style: {marginRight: '10px',marginTop:'6px',marginBottom:'6px'},
                on: {
                  click: () => {
                    self.deleteCategory(params.row);
                  }
                }
              }, "删除"),
            ]);
          }
        }
      ];
    }
  },
  methods: {
    search() {
      queryCategories(this);
    },
    showAddModal(level, parent) {
      this.$refs.categoryForm.resetFields();
      this.paramCategory.id = "";
      this.paramCategory.parentId = "";
      this.paramCategory.name = "";
      this.paramCategory.level = level;
      this.paramCategory.ancestorIds.splice(0);
      if(level > 1) {//不是一级分类
        this.paramCategory.parentId = parent.id;
        let ancestorIds = [];
        if(parent.ancestorIds != null) {
          ancestorIds.push(...parent.ancestorIds);
        }
        ancestorIds.push(parent.id);
        this.paramCategory.ancestorIds.push(...ancestorIds)
      }
      this.paramCategory.tags.splice(0);
      this.categoryModalStatus.tags.splice(0);
      this.categoryModalStatus.tags.push(...this.dict.categoryTags);
      this.categoryModalStatus.title = "新增";
      this.categoryModalStatus.isShow = true;
    },
    showModifyModal(row) {
      this.$refs.categoryForm.resetFields();
      this.paramCategory.id = row.id;
      this.paramCategory.parentId = row.parentId;
      this.paramCategory.name = row.name;
      this.paramCategory.level = row.level;
      this.paramCategory.ancestorIds.splice(0);
      if(row.ancestorIds != null) {
        this.paramCategory.ancestorIds.push(...row.ancestorIds);
      }
      this.paramCategory.tags.splice(0);
      this.categoryModalStatus.tags.splice(0);
      this.categoryModalStatus.tags.push(...this.dict.categoryTags);
      if(row.tags != null && row.tags.length > 0) {
        for(let tag of row.tags) {
          if(!this.categoryModalStatus.tags.indexOf(tag) >= 0) {
            this.categoryModalStatus.tags.push(tag);
          }
        }
        this.paramCategory.tags.push(...row.tags);
      }
      this.categoryModalStatus.title = "修改";
      this.categoryModalStatus.isShow = true;
    },
    hideCategoryModal() {
      this.categoryModalStatus.isShow = false;
    },
    createTag(input) {
      this.categoryModalStatus.tags.push(input);
    },
    saveCategory() {
      addOrUpdateCategory(this);
    },
    deleteCategory(row) {
      let self = this;
      self.$Modal.confirm({
        title: "确认",
        content: "确定要删除此分类吗？",
        onOk() {
          deleteCategory(self, row);
        }
      })
    },
  },
  mounted() {
    queryCategories(this);
  }
}
</script>

<style scoped lang="less">
@import  (once,optional)  "../css/base.less";
.main{}
.one-line {
  width: 100%;
}
</style>
